<template>
	<view class="supplier">
		<image src="https://master.jiaju01.com/web/static/images/pic001@2x.png" mode="widthFix"></image>
		<view class="supplier-btn">
			<view @click="showServe">联系客服</view>
			<view @click="FactoryAdd">意向成为供应商</view>
		</view>
		<!-- 客服 -->
		<uni-popup type="center" ref="server">
			<lw-server></lw-server>
		</uni-popup>
		<!-- 客服 -->
		<!-- 填写工厂信息 -->
		<uni-popup type="bottom" ref="factoryInfo">
			<view class="factoryInfo-pop">
				<view class="factoryInfo-pop-tit">
					<text>请填写工厂信息</text>
					<view class="close" @click="closeFactoryInfo"><u-icon name="close"></u-icon></view>
				</view>
				<view class="factoryInfo-pop-form">
					<view class="label">工厂名称</view>
					<view class="input"><input type="text" placeholder="请输入工厂名称" v-model="form.company_name"></view>
					<view class="label">工厂风格</view>
					<view class="input">
						<input type="text" placeholder="请选择工厂风格" v-model="form.factory_style" disabled @click="choseStyle">
						<u-icon name="arrow-down" color="#999"></u-icon>
					</view>
					<view class="label">工厂地址</view>
					<view class="input"><input type="text" placeholder="请输入工厂地址" v-model="form.address"></view>
					<view class="btn" @click="confirm">确认申请</view>
				</view>
			</view>
		</uni-popup>
		<!-- 填写工厂信息 -->
		<uni-popup type="bottom" ref="stylePop">
			<view class="style-pop">
				<view class="style-pop-tit">
					<text>选择风格</text>
					<view class="close" @click="closeStylePop"><u-icon name="close"></u-icon></view>
				</view>
				<view class="style-pop-list">
					<view class="style-pop-item" v-for="(data,index) in styleList" :key="index" @click="choseStyleItem(index)">
						<text>{{data.style_name}}</text>
						<view class="checkbox" :class="{active: data.checked}">
							<u-icon name="checkbox-mark" v-if="data.checked" color="#FFF" size="24"></u-icon>
						</view>
					</view>
				</view>
				<view class="style-pop-btn" @click="sure">确定</view>
			</view>
		</uni-popup>
		
		<uni-popup type="center" ref="qrcodepop">
			<view class="qrcodepop"><image :src="QRcode" mode="widthFix" show-menu-by-longpress></image></view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				styleList: [{
					checked: false,
					style_id: 1,
					style_name: '轻奢主义'
				},{
					checked: false,
					style_id: 2,
					style_name: '现代简约'
				},{
					checked: false,
					style_id: 3,
					style_name: '自然北欧'
				},{
					checked: false,
					style_id: 4,
					style_name: '现代中式'
				},{
					checked: false,
					style_id: 5,
					style_name: '精品实木'
				},{
					checked: false,
					style_id: 6,
					style_name: '经典美式'
				},{
					checked: false,
					style_id: 7,
					style_name: '奢华欧法'
				},{
					checked: false,
					style_id: 8,
					style_name: '乡村田园'
				}],
				form: {
					type: 2,
					company_name: '',
					factory_style: '',
					address: ''
				},
				QRcode: ''
			};
		},
		onLoad() {
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl',curPage.$page.fullPath)
		},
		methods: {
			showServe() {
				this.$refs.server.open()
			},
			FactoryAdd(){
				this.$refs.factoryInfo.open()
			},
			confirm() {
				if(!this.form.company_name){
					uni.showToast({
						icon: 'none',
						title: '请输入工厂名称'
					})
					return false
				}else if(!this.form.factory_style){
					uni.showToast({
						icon: 'none',
						title: '请输入工厂风格'
					})
					return false
				}else if(!this.form.address){
					uni.showToast({
						icon: 'none',
						title: '请输入工厂地址'
					})
					return false
				}
				this.$u.apiWei.FactoryAdd(this.form).then(res => {
					if(res.datas.url){
						this.QRcode = res.datas.url
						this.$nextTick(() => {
							this.$refs.qrcodepop.open()
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '申请成功，请等待客服人员与您联系!',
							duration: 1500,
							success: () => {
								setTimeout(() => {
									this.$refs.factoryInfo.close()
									uni.navigateBack({
										animationDuration: 500
									})
								},1500)
							}
						})
					}
				})
			},
			closeFactoryInfo(){
				this.$refs.factoryInfo.close()
			},
			choseStyle(){
				this.$refs.stylePop.open()
			},
			choseStyleItem(index){
				this.styleList[index].checked = !this.styleList[index].checked
			},
			sure(){
				let factory_style = []
				this.styleList.forEach(item => {
					if(item.checked){
						factory_style.push(item.style_name)
					}
				})
				if(!factory_style.length){
					uni.showToast({
						icon: 'none',
						title: '请至少选择一个风格'
					})
					return false
				}
				this.form.factory_style = factory_style.join(',')
				this.$refs.stylePop.close()
			},
			closeStylePop(){
				this.$refs.stylePop.close()
			}
		}
	}
</script>

<style lang="scss">
	.supplier {
		padding-top: 20rpx;
		padding-bottom: 130rpx;

		image {
			width: 100%;
		}
		
		.factoryInfo-pop{
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			.factoryInfo-pop-tit{
				display: flex;
				justify-content: space-between;
				text{
					font-weight: bold;
					color: #28221F;
					font-size: 36rpx;
				}
				margin-bottom: 10rpx;
			}
			.factoryInfo-pop-form{
				.label{
					margin-top: 30rpx;
					color: #757575;
					font-size: 28rpx;
				}
				.input{
					margin-top: 20rpx;
					position: relative;
					input{
						padding: 20rpx;
						border-radius: 4rpx;
						border: solid 1px #EEE;
						font-size: 24rpx;
					}
					/deep/ .u-icon{
						position: absolute;
						right: 30rpx;
						top: 50%;
						transform: translateY(-50%);
					}
				}
				.btn{
					height: 88rpx;
					line-height: 88rpx;
					margin-top: 30rpx;
					background-color: #141414;
					border-radius: 8rpx;
					text-align: center;
					color: #FFF;
				}
			}
		}
		
		.supplier-btn {
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 30rpx;
			background-color: #FFF;
			border-top: solid 1px #EEE;

			view {
				flex: 1;
				border-radius: 50rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
				background-color: #141414;
				color: #fff;
				text-align: center;
				&:first-child{
					margin-right: 20rpx;
				}
			}
		}
		
		.style-pop{
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			.style-pop-tit{
				display: flex;
				justify-content: space-between;
				text{
					font-weight: bold;
					color: #28221F;
					font-size: 36rpx;
				}
				margin-bottom: 10rpx;
			}
			.style-pop-list{
				.style-pop-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 0;
					border-bottom: solid 1px #F8F8F8;
					&:last-child{
						border-bottom: none;
						padding-bottom: 0;
					}
					.checkbox{
						width: 36rpx;
						height: 36rpx;
						border: 2rpx solid #CCCCCC;
						border-radius: 4rpx;
						text-align: center;
						line-height: 32rpx;
						&.active{
							background-color: #F59359;
							border-color: #F59359;
						}
					}
				}
			}
			.style-pop-btn{
				height: 88rpx;
				line-height: 88rpx;
				margin-top: 40rpx;
				background-color: #141414;
				border-radius: 8rpx;
				text-align: center;
				color: #FFF;
			}
		}
		
		.qrcodepop{
			width: 600rpx;
			image{
				width: 100%;
				border-radius: 8rpx;
			}
		}
		
	}
</style>
